<template>
	<view class="orderDetails">
		<view class="banner" v-if="order.status==1" style="height: 700rpx;">
			<text class="big">{{order.id}}</text>
			<uqrcode id="qrcode" :willReadFrequency="true" ref="uqrcode" canvas-id="qrcode" :value="order.number" :options="{ margin: 10 }"></uqrcode>
			<text>{{order.number}}</text>
		</view>
		<view class="banner" style="height: 300rpx;" v-else="order.status!=1">
			<text class="big">订单已完成</text>
			<text>{{order.number}}</text>
		</view>
		<view class="order-msg">
			<view class="order-msg-item" v-for="item in orderMsg">
				<image :src="'http://localhost:8088/file/downloadGoods?t='+item.image" mode=""></image>
				<text class="name">{{item.name}}</text>
				<text class="number">x{{item.number}}</text>
				<text class="price">￥{{(item.amount/100).toFixed(2)}}</text>
			</view>
		</view>
		<view class="all">
			<text><span>总计:</span>￥{{order.amount}}</text>
			<text><span>用户名称:</span>{{order.name}}</text>
			<text><span>联系电话:</span>{{order.phone}}</text>
			<text><span>订单号:</span>{{order.number}}</text>
			<text><span>下单时间:</span>{{order.orderTime}}</text>
			<text><span>备注:</span>{{order.remark}}</text>
		</view>
	</view>
</template>

<script>
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	export default {
		data() {
			return {
				orderId: '',
				orderMsg: [],
				order: {}
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.getOrder();
			this.getOrderMsg();
		},
		methods: {
			getOrder() {
				uni.request({
					url: "/order/getOrder",
					data: {
						orderId: this.orderId
					},
					success: (res) => {
						console.log(res);
						this.orderMsg = res.data.data;
					}
				})
			},
			getOrderMsg() {
				uni.request({
					url: '/order/getOrderMsg',
					data: {
						id: this.orderId
					},
					success: (res) => {
						console.log(res);
						this.order = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		text-align: center;
		font-size: 24rpx;
		box-sizing: border-box;
		padding-top: 80rpx;

		#qrcode {
			margin: 20rpx auto;
		}
		text{
			color: gray;
			display: block;
		}
		.big{
			font-size: 80rpx;
			font-weight: 600;
			color: black;
		}
	}

	.order-msg-item {
		width: 90%;
		height: 170rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
		border-bottom: 2rpx #bfbfbf solid;
		display: flex;
		justify-items: center;
		position: relative;

		image {
			height: 150rpx;
			width: 150rpx;
			border-radius: 20rpx;
		}

		.name {
			margin-left: 20rpx;
			font-weight: 600;
			font-size: 36rpx;
			flex: 1;
		}

		.number {
			justify-content: right;
			margin-right: 20rpx;
		}

		.price {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}

		.time {
			position: absolute;
			left: 170rpx;
			bottom: 20rpx;
		}
	}

	.all {
		text-align: left;
		padding-left: 40rpx;
		font-size: 24rpx;

		text {
			display: block;
			line-height: 50rpx;

			span {
				width: 120rpx;
				display: inline-block;
			}
		}
	}
</style>